<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3 style="color: #ffc72c;">{{ resText }}</h3>
    <Row style="margin: 40px 0;">
      <Col span="4">
      </Col>
      <Col span="7">
      <Input disabled size="large" v-model="meat"></Input>
      </Col>
      <Col span="2">
      <h2>+</h2>
      </Col>
      <Col span="7">
      <Input disabled size="large" v-model="vegetable"></Input>
      </Col>
      <Col span="4">
      </Col>
    </Row>
    <Button size="large" type="warning" @click="chooseDinner">一键出餐</Button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      resText: "让我康康",
      isSomethingSpeacial: false,
      meat: "",
      vegetable: "",
      mArr: [
        { name: "花菜炒肉", lv: 3 },
        { name: "青椒鸡蛋", lv: 1 },
        { name: "白灼虾", lv: 3 },
        { name: "锅包肉", lv: 3 },
        { name: "土豆烧牛肉", lv: 2 },
        { name: "宫保鸡丁", lv: 3 },
        { name: "糖醋排骨", lv: 3 }],
      vArr: [
        { name: "青椒土豆丝", lv: 2 },
        { name: "西兰花炒口菇", lv: 3 },
        { name: "秋葵", lv: 3 },
        { name: "地三鲜", lv: 2 },
        { name: "炒山药", lv: 3 },
        { name: "干煸豇豆", lv: 3 },
        { name: "广东小菜心", lv: 3 },
        { name: "麻辣香锅", lv: 2 },
        { name: "莴苣木耳炒鸡蛋", lv: 1 }
      ],
      sArr: [
        { name: "红烧鲫鱼", lv: 4 },
        { name: "南京烤鸭", lv: 4 },
        { name: "夫妻肺片", lv: 4 }
      ]
    }
  },
  methods: {
    chooseDinner() {
      let special = Math.floor(Math.random() * 10);
      let mList = special < 9 ? this.mArr : this.sArr,
        vList = this.vArr;
      let mIndex = Math.floor(Math.random() * mList.length),
        vIndex = Math.floor(Math.random() * vList.length);
      let meatSelected = mList[mIndex],
        vegetableSelected = vList[vIndex];
      this.meat = meatSelected.name;
      this.vegetable = vegetableSelected.name;
      let mlv = meatSelected.lv, vlv = vegetableSelected.lv;
      this.resText = "平平无奇的一餐"
      if (mlv * vlv === 1) {
        this.resText = "好耶，全蛋宴捏！"
      } else if ((mlv === 1 && vlv === 2) || (mlv === 2 && vlv === 1)) {
        this.resText = "鸡蛋加土豆捏！"
      } else if (mlv === 4) {
        this.resText = "欸嘿，站起来了！"
      } else if (mlv === 1 || vlv === 1) {
        this.resText = "不错哦，有鸡蛋捏"
      } else if (mlv === 2 || vlv === 2) {
        this.resText = "还行哦，有土豆捏"
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
